{template 'header'}
<link rel="stylesheet" href="{MODULE_URL}assets/css/pic_look.css">
<style>
    .up_loader_text {
        background: #fff;
        margin-top: -10px;
        padding-top: 10px;
        padding-bottom: 5%;
    }

    .text_red {
        color: #dd524d;
        margin: 10px;
    }

    .case img {
        width: 100%;
    }

    .case div {
        padding: 10px;
    }
    .case img{
        height: 16rem;
    }
    #uploadForm img {
        border: solid 1px #d7d7d7;
        width: 20vw;
        height: 20vw;
    }
    #uploadForm .hied_input {
        display: none;
        position: fixed;
        top: -99999999999px;
    }

    #uploadForm #pick_img_wrap div {
        padding: 1vh;
        float: left;
    }
    .mui-btn-block{
        font-size: 16px;
        margin: 10px auto;
        padding: 8px 0;
    }
    .uploder{
        background: #fff;
        margin-top: 2vh;
        padding-bottom: 2vh;
    }
    .uploder > p{
        padding-left: 2vw;
        padding-top: 2vw;
    }
    #uploadForm textarea{
        width: 96%;
        margin: 0 auto;
        display: block;
        height: 20vh;
        font-size: 12px;
    }
    #pick_img_file{
        position: relative;

    }
    #pick_img_file input{
        position: absolute;
        opacity: 0;
        height: 30vh;
        width: 30vw;
    }
    #pick_img_file{
        width: 20vw;
        height: 20vw;
        background:url("{MODULE_URL}assets/img/pic_img.png") center !important;
        border: 1px solid #d7d7d7;
        float: left;
        margin-top: 2vw;
        overflow: hidden;
        margin-left: 2vw;
    }
    #uploader_btn{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .detail_validate{
        background: #fff;
        margin-top: 2vh;
        padding: 2vw;
    }
</style>
</head>
<body>
<!-- 头部 结束 -->
<div class="mui-content">
    <!-- 要求文本开始 -->
    <div class="up_loader_text">
        <div class="mui-content-padded">
            <p>{$task['title']}</p>
            <p>{$task['news_from']}</p>

        </div>
    </div>
    <!-- 要求文本结束 -->
    <!--任务要求-->
    <div class="detail_validate">
        <p>任务要求 : <span>{$task['validate']}</span></p>
    </div>
    <!--任务要求结束-->
    <!-- 上传模块开始 -->
    <div class="uploder mui-clearfix">
        <p>上传凭证：</p>
        <form id='uploadForm' enctype="multipart/form-data"  onsubmit="return false">
            <textarea placeholder="请填写文字凭证" id="submit"></textarea>
            <div class="mui-clearfix">
                <div id="pick_img_wrap">

                </div>
                <div id="pick_img_file" class="pick_img">
                    <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png" multiple="" id="pic">
                </div>
                <div class="input-list"></div>
            </div>
            <button type="button" value="上传凭证" class="mui-btn mui-btn-primary mui-btn-block" id="uploader_btn">上传凭证</button>
        </form>
    </div>
    <!-- 上传模块结束 -->
</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<!-- 以上为引入第三方插件 -->
<script>
    //上传图片
    $(function () {
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png'];
        // 1024KB，也就是 1MB
        var maxSize = 1024 * 1024;
        // 图片最大宽度
        var maxWidth = 800;
        // 最大上传图片数量
        var maxCount = 4;
        var upload_url = '{php echo $this->createMobileUrl("core",array("op"=>"task_submit","extra"=>"upload"))}'
        $('#pic').on('change', function () {
            var files = event.target.files;
            // 如果没有选中文件，直接返回
            if($('.input-list input').length + files.length > maxCount){
                mui.alert('请小于4张');
                return;
            }
            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new FileReader();
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    mui.alert('该类型不允许上传');
                    continue;
                }
                if (file.size > maxSize) {
                    mui.alert('图片太大，不允许上传');
                    continue;
                }
                if ($('.input-list input').length > maxCount) {
                    mui.alert('最多只能上传' + maxCount + '张图片');
                    return;
                }
                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL('image/png');
                        // 插入到预览区
                        var $preview = $("<div class='pick_img del_img' > <img src=" + base64 + " ></div>");
                        $('#pick_img_wrap').append($preview);

                    };
                    img.src = e.target.result;
                    $.post(upload_url, { img: e.target.result},function(res){
                        if(res.code == 1){
                            var html = '<input name="pics[]" type="hidden" value="'+res.data+'">';
                            $('.input-list').append(html)
                        }else{
                            mui.toast(res.msg)
                        }
                    },'json');
                };
                reader.readAsDataURL(file);
            }
        })
    });
    //删除图片
    $(document).on('click','.del_img',function (){
        var indexx = $(this).index();
        mui.confirm('确认删除吗','警告',['是','否'],function (e) {
            if(e.index == 0){
                $('.del_img').eq(indexx).remove();
                $('.input-list').children('input').eq(indexx).remove();
            }
        })
    });

    $('#uploader_btn').click(function () {
        var taskid = '{$taskid}';
        var submit = $('#submit').val();
        var picarr = [];
        $(".input-list input").each(function(){
            picarr.push($(this).val());
        });
        var list_url = '{php echo $this->createMobileUrl("core",array("op"=>"task_submit"))}';
        mui.ajax(list_url,{
            data:{taskid,submit,picarr},
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            async: false,
            timeout:10000,//超时时间设置为10秒；
            success:function(ret){
                if(ret.code){
                    mui.alert(ret.msg,'',function () {
                        location.href = '{php echo $this->createMobileUrl("member",array("op"=>"task"))}'
                    })
                }else{
                    mui.toast(ret.msg)
                }
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                mui.toast("服务器出现异常，请稍后重试");
            }
        });
    });


</script>
</body>
</html>